<template>
  <div style="width: 100%;height: 100%; position: relative;">

    <div>
      <van-cell>
        <template #title>
          <span class="custom-title">统计截止：</span>
          <span class="custom-title">{{time}}</span>
        </template>
      </van-cell>
      <van-cell style="margin-top: 10px;">
        <template #title>
          <table class="table" width="100%" border="1px solid #ccc" cellspacing="0" cellpadding="0">
            <tr>
              <th></th>
              <th>日雨量</th>
              <th>当天累计</th>
              <th>2天累计</th>
            </tr>
            <tr>
              <td>>=250</td>
              <td @click="showDetail('日雨量','>=250',showData.ROWA||0)">
                <van-tag plain type="primary">{{showData.ROWA||0}}</van-tag>
              </td>
              <td @click="showDetail('当天累计','>=250',showData.ROWAA||0)">
                <van-tag plain type="primary">{{showData.ROWAA||0}}</van-tag>
              </td>
              <td @click="showDetail('2天累计','>=250',showData.ROWAAA||0)">
                <van-tag plain type="primary">{{showData.ROWAAA||0}}</van-tag>
              </td>
            </tr>
            <tr>
              <td>100~250</td>
              <td @click="showDetail('日雨量','100~250',showData.ROWB||0)">
                <van-tag plain type="primary">{{showData.ROWB||0}}</van-tag>
              </td>
              <td @click="showDetail('当天累计','100~250',showData.ROWBB||0)">
                <van-tag plain type="primary">{{showData.ROWBB||0}}</van-tag>
              </td>
              <td @click="showDetail('2天累计','100~250',showData.ROWBBB||0)">
                <van-tag plain type="primary">{{showData.ROWBBB||0}}</van-tag>
              </td>
            </tr>
            <tr>
              <td>50~100</td>
              <td @click="showDetail('日雨量','100~250',showData.ROWC||0)">
                <van-tag plain type="primary">{{showData.ROWC||0}}</van-tag>
              </td>
              <td @click="showDetail('当天累计','100~250',showData.ROWCC||0)">
                <van-tag plain type="primary">{{showData.ROWCC||0}}</van-tag>
              </td>
              <td @click="showDetail('2天累计','100~250',showData.ROWCCC||0)">
                <van-tag plain type="primary">{{showData.ROWCCC||0}}</van-tag>
              </td>
            </tr>
            <tr>
              <td>10~50</td>
              <td @click="showDetail('日雨量','10~50',showData.ROWD||0)">
                <van-tag plain type="primary">{{showData.ROWD||0}}</van-tag>
              </td>
              <td @click="showDetail('当天累计','10~50',showData.ROWDD||0)">
                <van-tag plain type="primary">{{showData.ROWDD||0}}</van-tag>
              </td>
              <td @click="showDetail('2天累计','10~50',showData.ROWDDD||0)">
                <van-tag plain type="primary">{{showData.ROWDDD||0}}</van-tag>
              </td>
            </tr>
            <tr>
              <td><10</td>
              <td @click="showDetail('日雨量','<10',showData.ROWE||0)">
                <van-tag plain type="primary">{{showData.ROWE||0}}</van-tag>
              </td>
              <td @click="showDetail('当天累计','<10',showData.ROWEE||0)">
                <van-tag plain type="primary">{{showData.ROWEE||0}}</van-tag>
              </td>
              <td @click="showDetail('2天累计','<10',showData.ROWEEE||0)">
                <van-tag plain type="primary">{{showData.ROWEEE||0}}</van-tag>
              </td>
            </tr>
          </table>
        </template>
      </van-cell>

      <van-cell style="margin-top: 10px;" title="选择其他日期" :value="date" @click="show = true"/>

      <van-calendar style="position: absolute;z-index: 10000;" v-model="show" :poppable="true" @confirm="onConfirm"
                    :min-date="minData"/>

    </div>
  </div>
</template>

<script>
    import API from "../../api/api_common_b";
    import {Notify} from 'vant';


    export default {
        name: "Static",
        data() {
            return {
                time: "",
                date: '',
                show: false,
                minData: new Date(2010, 0, 1),
                showData: {}
            }
        },
        mounted() {
            this.getTime();
        },
        methods: {
            showDetail(column, row, value) {
                this.$router.push({
                    name: 'Detail', params: {
                        type: column,
                        time: this.date,
                        row: row,
                        value: value,
                    }
                })

            },
            formatDate(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
                this.show = false;
                this.date = `${this.formatDate(date)}`;
                this.getData(this.date)
            },
            getData(date) {
                API.getStatic({time: date}).then(res => {
                    this.showData = res.recordset[0];
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                    Notify({type: 'danger', message: '获取统计信息失败'});
                })
            },
            getTime() {
                API.getMaxTime().then(res => {
                    console.log(res);
                    this.time = res.recordset[0].TM.replace("T", " ").substring(0, 16);
                    this.date=this.time.substring(0, 10);
                    this.getData(this.time.substring(0, 10))
                }).catch(err => {
                    console.log(err);
                    Notify({type: 'danger', message: '获取最新统计时间失败'});
                }).finally(() => {
                    this.loading = false;
                })
            }
        }
    }
</script>

<style scoped>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }

  .table td {
    white-space: nowrap;
    height: 30px;
    text-align: center;
  }
</style>
